<script src="/include/calendar/calendar.js"></script>
<style type="text/css">
a {
	cursor: pointer;
}
.operate a {
	margin-right: 5px;
	padding: 0 5px;
}
.alert.alert-info p {
	margin-top: 0px;
}
.panel-body a {
	color: inherit;
}
#search-form .btn-group {
	margin-bottom: 0;
	width: 120px;
}
#search-form .btn-group button {
	width: 120px;
}

.timeline {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    position: relative;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 50px;
}

.timeline .time-show {
    margin-right: -75px;
    margin-top: 30px;
    position: relative;
    margin-bottom: 30px;
}

.time-show .btn {
    width: 150px;
}

.timeline .time-show a {
    color: #fff;
}

.timeline:before {
    background-color: #d8d9df;
    bottom: 0px;
    content: "";
    left: 50%;
    position: absolute;
    top: 30px;
    width: 1px;
    z-index: 0;
}

h3.timeline-title {
    margin: 0;
    color: #C8CCD7;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 5px;
    text-transform: uppercase;
}

.t-info {
    color: #C8CCD7;
}

.timeline-item:before, .timeline-item.alt:after {
    content: "";
    display: block;
    width: 50%;
}

.timeline-item {
    display: table-row;
}

.timeline-desk {
    display: table-cell;
    vertical-align: top;
    width: 50%;
}

.timeline-desk h1 {
    font-size: 16px;
    font-weight: 300;
    margin: 0 0 5px;
}

.timeline-desk .panel {
    display: block;
    margin-left: 45px;
    position: relative;
    text-align: left;
    background: #fff;
}

.timeline-item .timeline-desk .arrow {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    display: block;
    height: 0;
    left: -7px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    width: 0;
}

.timeline-item .timeline-desk .arrow {
    border-right: 8px solid #fff !important;
}

.timeline-item.alt .timeline-desk .arrow-alt {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    display: block;
    height: 0;
    right: -7px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    width: 0;
    left: auto;
}

.timeline-item.alt .timeline-desk .arrow-alt {
    border-left: 8px solid #fff !important;
}

.timeline .timeline-icon {
    left: -54px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
}

.timeline .timeline-icon {
    background: #fff;
    border: 1px solid #D8D9DF
}

.timeline-desk span a {
    text-transform: uppercase;
}

.timeline-desk h1.red, .timeline-desk span a.red {
    color: #EF6F66;
}

.timeline-desk h1.green, .timeline-desk span a.green {
    color: #39B6AE;
}

.timeline-desk h1.blue, .timeline-desk span a.blue {
    color: #56C9F5;
}

.timeline-desk h1.purple, .timeline-desk span a.purple {
    color: #8074C6;
}

.timeline-desk h1.light-green, .timeline-desk span a.light-green {
    color: #A8D76F;
}

.timeline-desk h1.yellow, .timeline-desk span a.yellow {
    color: #fed65a;
}

.timeline .timeline-icon {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    display: block;
    height: 20px;
    width: 20px;
    text-align: center;
    color: #fff;
}

.timeline .timeline-icon i {
    margin-top: 9px;
}

.timeline-item.alt .timeline-icon {
    left: auto;
    right: -56px;
}

.timeline .time-icon:before {
    font-size: 16px;
    margin-top: 5px;
}

.timeline .timeline-date {
    left: -245px;
    position: absolute;
    text-align: right;
    top: 12px;
    width: 150px;
    display: none;
}

.timeline-item.alt .timeline-date {
    left: auto;
    right: -245px;
    text-align: left;
    display: none;
}

.timeline-desk h5 span {
    color: #999999;
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.timeline-item.alt:before {
    display: none;
}

.timeline-item:before, .timeline-item.alt:after {
    content: "";
    display: block;
    width: 50%;
}

.timeline-desk p {
    font-size: 14px;
    margin-bottom: 0;
    color: #999;
}

.timeline-desk a {
    color: #1fb5ad;
}

.timeline-desk .panel {
    margin-bottom: 5px;
}

.timeline-desk .album {
    margin-top: 20px;
}

.timeline-item.alt .timeline-desk .album {
    margin-top: 20px;
    float: right;
}

.timeline-desk .album a {
    margin-right: 5px;
    float: left;
}

.timeline-item.alt .timeline-desk .album a {
    margin-left: 5px;
    float: right;
}

.timeline-desk .notification {
    background: none repeat scroll 0 0 #FFFFFF;
    margin-top: 20px;
    padding: 8px;
}

.timeline-item.alt .panel {
    margin-left: 0;
    margin-right: 45px;
}

.mbot30 {
    margin-bottom: 30px;
}

.timeline-item.alt h1, .timeline-item.alt p {
    text-align: right;
}

</style>
<div class="pageheader">
	<h2>
		<i class="fa fa-sitemap"></i>办公管理
	</h2>
	<div class="breadcrumb-wrapper">
		<span class="label">你所在的位置：</span>
		<ol class="breadcrumb">
			<li><a href="/index">ERP管理系统</a></li>
			<li>办公管理</li>
			<li class="active">日报总览</li>
		</ol>
	</div>
</div>
<div class="contentpanel">
	<div class="main">
		<form id="search-form" class="form-inline" method="post" action="" style="margin-bottom: 10px;">
			<div class="form-group">
				<input placeholder="标题" type="text" name="title" value="<?php echo $this->title;?>" class="form-control">
			</div>
		    <div class="form-group form-inline">
                <div class="btn-group group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="text">选择团队 </span></button>
                    <input type="hidden" value="0" name="group">
                    <ul class="dropdown-menu">
                        <li><a data-id="1">管理团队</a></li>
                        <li><a data-id="2">运营团队</a></li>
                        <li><a data-id="3">技术团队</a></li>
                        <li><a data-id="4">仓储行政团队</a></li>
                    </ul>
                </div>
                <div class="btn-group asign_user">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="text"><?php echo empty($this->task_name)?'选择成员':$this->task_name; ?> </span></button>
                    <input type="hidden" value="<?php echo empty($this->adduser)?'':$this->adduser; ?>" name="add_user">
                    <ul class="dropdown-menu">
                
                    </ul>
                </div>
            </div>
			<div class="form-group">
				<label for="date">日期:</label>
				<input class="form-control" type="text" name="starttime" onclick="new Calendar().show(this);" readonly="readonly" value="<?php echo $this->starttime;?>"> 
				至<input class="form-control" type="text" name="endtime" onclick="new Calendar().show(this);" readonly="readonly" value="<?php echo $this->endtime;?>">
			</div>
			<button type="submit" class="btn btn-primary">搜索</button>
		</form>
		<table id="order-log" class="table table-bordered table-hover">
			<thead>
				<tr>
					<th width="8%">谁的日报</th>
					<th width="30%">日报内容</th>
					<th>关联任务或需求</th>
					<th width="4%">发布时间</th>
				</tr>
			</thead>
			<tbody>
                <?php if ($this->list):?>
                <?php foreach ($this->list as $v):?>
                <tr>
					<td><?php echo $v['add_user'];?></td>
					<td><?php echo stripslashes($v['content']);?></td>
					<td>
					    <?php if(!empty($v['qa'])){?>
					    <table class="table table-bordered table-hover">
					        <thead>
					            <tr><th width="50%">任务</th><th>当日所用工时</th><th>当日任务进度</th></tr>
					        </thead>
					        <tbody>
					            <?php
					        	    foreach ($v['qa'] as $qv){
					            ?>
					            <tr>
					                <td><?php echo $qv['title']; ?></td>
					                <td><?php echo $qv['time'].'工时'; ?></td>
					                <td><?php echo $qv['progress'].'%'; ?></td>
					            </tr>
				    	        <?php } ?>
					        </tbody>
					    </table>
					    <?php 
                        }else{
                        	echo '该日报无关联任务';
					    }?>
					</td>
					<td><?php echo $v['add_time'];?></td>
				</tr>
			    <?php endforeach;?> 
			    <?php endif;?>
			    <tr>
					<td colspan="7">
			            <?php echo $this->paginationControl ( $this->paginator, 'Sliding', 'page/totalqapaper.phtml', array (
			            		'title' => $this->title,
			            		'adduser'=>$this->adduser,
						        'starttime' => $this->starttime,
						        'endtime' => $this->endtime) 
			            );?>
			        </td>
				</tr>
			</tbody>
		</table>
		
		<div class="timeline">
            <?php if ($this->list && !empty($this->adduser)){?>
			<article class="timeline-item alt">
				<div class="text-right">
					<div class="time-show first">
						<a class="btn btn-warning">工作日报时间轴</a>
					</div>
				</div>
			</article>
            <?php 
            $i = 0;
            foreach ($this->list as $v){
            	$i++;
            ?>
			<article class="timeline-item <?php echo $i%2?'alt':'';?>">
				<div class="timeline-desk">
					<div class="panel">
						<div class="panel-body">
							<span class="<?php echo $i%2?'arrow-alt':'arrow';?>"></span> <span class="timeline-icon"></span>
							<span class="timeline-date">08:25 am</span>
							<h1 class="red"><?php echo $v['add_time'];?></h1>
							<div><?php echo stripslashes($v['content']);?></div>
						</div>
					</div>
				</div>
			</article>
			<?php } }?>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	 $(".site li a").click(function(){
	     $(".site .text").text($(this).text());
         $(".site input").val($(this).text());
     });
	 $(".group li a").click(function(){
	     $(".group .text").text($(this).text());
	     $(".group input").val($(this).data('id'));
	     $.get("/office/loaduser", {group:$(this).data('id')},
	    	 function(data){
	    	     $(".asign_user .dropdown-menu").html(data.content);
	    	     $(".asign_user .text").text('选择成员');
		     },'json'
		 );
     });
	 $(".from li a").click(function(){
	     $(".from .text").text($(this).text());
	     $.get("/office/loaduser", {group:$(this).data('id')},
	    	 function(data){
	    	     $(".from_user .dropdown-menu").html(data.content);
	    	     $(".from_user .text").text('选择成员');
	    	     $(".from_user").removeClass("hidden");
		     },'json'
		 );
     });
	 $(".asign_user li a").live('click',function(){
	     $(".asign_user .text").text($(this).text());
	     $(".asign_user input").val($(this).data('id'));
     });
	 $(".from_user li a").live('click',function(){
	     $(".from_user .text").text($(this).text());
	     $(".from_user input").val($(this).data('id'));
     });
	 $(".priority li a").click(function(){
	     $(".priority .text").text($(this).text());
	     $(".priority input").val($(this).data('id'));
     });
})
</script>